/**
 * @fileOverview
 * @author wangshaojun
 * @version
 */

import React, {Component, PropTypes,} from 'react';

import {
    View,
    Text,
    StyleSheet,
    Alert,
    ScrollView,
    ListView,
    Image,
    Platform,
    ActivityIndicator,
    TouchableHighlight,
} from 'react-native';

import PullToRefreshListView from 'react-native-smart-pull-to-refresh-listview';

class CustomListView extends Component {

    static PropTypes = {
        onRefresh: PropTypes.func.isRequired,
        onLoadMore: PropTypes.func.isRequired,
        renderRow: PropTypes.func.isRequired,
        renderFooter: PropTypes.func,
        renderSectionHeader: PropTypes.func,
        style: View.propTypes.style,
        footerStyle: View.propTypes.style,
    }

    // 构造
    constructor(props) {
        super(props);

        this._dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });

        let dataList = [];

        this.state = {
            first: true,
            dataList: dataList,
            dataSource: this.props.renderSectionHeader?this._dataSource.cloneWithRowsAndSections({}):this._dataSource.cloneWithRows(dataList),
        }
    }

    // componentWillReceiveProps(nextProps){
    //     let dataList = nextProps.dataList || [];
    //     this.setState({
    //         dataList: dataList,
    //         dataSource: this._dataSource.cloneWithRows(dataList),
    //     });
    // }

    render() {
        //console.log(`AMapALoneNearByList render...`)
        let dataSource = this.props.dataList?this._dataSource.cloneWithRows(this.props.dataList):this.state.dataSource;
        return (
            <PullToRefreshListView
                ref={ (component) => this._pullToRefreshListView = component }
                viewType={PullToRefreshListView.constants.viewType.listView}
                style={this.props.style}
                contentContainerStyle={[{backgroundColor: '#fff',},this.props.contentStyle]}
                initialListSize={10}
                enableEmptySections={this.props.renderSectionHeader?false:true}
                renderSectionHeader={this._renderSectionHeader}
                renderFloatSectionHeader={this._renderFloatSectionHeader}
                dataSource={dataSource}
                pageSize={10}
                renderRow={this._renderRow}
                onLayout={this._onLayout}
                //renderSeparator={(sectionID, rowID) => <View style={{borderBottomWidth: StyleSheet.hairlineWidth,borderBottomColor: '#ccc',}} />}
                //listItemProps={{overflow: 'hidden', height: 50, }}
                renderHeader={this._renderHeader}
                renderFooter={this._renderFooter}
                onRefresh={this._onRefresh}
                onLoadMore={this._onLoadMore}
                listSectionProps={{height: this.props.renderFloatSectionHeader?30:0, overflow: 'hidden', }}
                autoLoadMore={false}
                //onEndReachedThreshold={15}
            />
        )

    }

    _onLayout = (e) =>{
        if(this._pullToRefreshListView){
            this._pullToRefreshListView._scrollViewContainerHeight = e.nativeEvent.layout.height;
        }
    }

    _renderRow = (rowData, sectionID, rowID) => {
        return this.props.renderRow(rowData, sectionID, rowID);
    }

    _renderSectionHeader = (sectionData, sectionID) => {
        return this.props.renderSectionHeader?this.props.renderSectionHeader(sectionData, sectionID):null;
    }

    _renderFloatSectionHeader = (sectionID) => {
        return this.props.renderFloatSectionHeader?this.props.renderFloatSectionHeader(sectionID):null;
    }

    _renderHeader = (viewState) => {
        let {pullState, pullDistancePercent} = viewState;
        let {refresh_none, refresh_idle, will_refresh, refreshing,} = PullToRefreshListView.constants.viewState
        pullDistancePercent = Math.round(pullDistancePercent * 100);
        switch(pullState) {
            case refresh_none:
                return (
                    <View style={{height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f3f3f3',}}>
                        <Text style={{fontSize: 14, color: '#555555',}}>下拉刷新</Text>
                    </View>
                )
            case refresh_idle:
                return (
                    <View style={{height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f3f3f3',}}>
                        <Text style={{fontSize: 14, color: '#555555',}}>下拉刷新{pullDistancePercent}%</Text>
                    </View>
                )
            case will_refresh:
                return (
                    <View style={{height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f3f3f3',}}>
                        <Text style={{fontSize: 14, color: '#555555',}}>释放刷新 {pullDistancePercent > 100 ? 100 : pullDistancePercent}%</Text>
                    </View>
                )
            case refreshing:
                return (
                    <View style={{flexDirection: 'row', height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f3f3f3',}}>
                        <ActivityIndicator style={{marginRight: 10,}} color={'#a9a9a9'}/><Text style={{fontSize: 14, color: '#555555',}}>正在刷新</Text>
                    </View>
                )
        }
    }

    _renderFooter = (viewState) => {
        let {pullState, pullDistancePercent} = viewState;
        let {load_more_none, load_more_idle, will_load_more, loading_more, loaded_all, } = PullToRefreshListView.constants.viewState;
        pullDistancePercent = Math.round(pullDistancePercent * 100);

        switch(pullState) {
            case load_more_none:
                return (
                    <View style={this.props.footerStyle}>
                        {this.props.renderFooter?this.props.renderFooter():null}
                        <View style={{height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f3f3f3',}}>
                            <Text style={{fontSize: 14, color: '#555555',}}>上拉加载更多</Text>
                        </View>
                    </View>
                )
            case load_more_idle:
                return (
                    <View style={this.props.footerStyle}>
                        {this.props.renderFooter?this.props.renderFooter():null}
                        <View style={{height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f3f3f3',}}>
                            <Text style={{fontSize: 14, color: '#555555',}}>上拉加载更多 {pullDistancePercent}%</Text>
                        </View>
                    </View>
                )
            case will_load_more:
                return (
                    <View style={this.props.footerStyle}>
                        {this.props.renderFooter?this.props.renderFooter():null}
                        <View style={{height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f3f3f3',}}>
                            <Text style={{fontSize: 14, color: '#555555',}}>释放加载更多 {pullDistancePercent > 100 ? 100 : pullDistancePercent}%</Text>
                        </View>
                    </View>
                )
            case loading_more:
                return (
                    <View style={this.props.footerStyle}>
                        {this.props.renderFooter?this.props.renderFooter():null}
                        <View style={{flexDirection: 'row', height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f4f4f4',}}>
                            <ActivityIndicator style={{marginRight: 10,}} color={'#a9a9a9'}/><Text style={{fontSize: 14, color: '#555555',}}>正在加载更多</Text>
                        </View>
                    </View>
                )
            case loaded_all:
                return (
                    <View style={this.props.footerStyle}>
                        {this.props.renderFooter?this.props.renderFooter():null}
                        <View style={{height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f4f4f4',}}>
                            <Text style={{fontSize: 14, color: '#555555',}}>没有更多了</Text>
                        </View>
                    </View>
                )
        }
    }

    _onRefresh = () => {
        this.props.onRefresh()
    }

    _onLoadMore = () => {
        this.props.onLoadMore()
    }

}

module.exports = CustomListView;
